<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'评价项目',collapsible:false" style="width:200px;">
    	<div id="aa" class="easyui-accordion" data-options="fit:true">   
		    <div title="车身外饰" style="padding:10px;">
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec',selected:true">造型</a>
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec'">操作方便性</a>
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec'">外观品质</a>
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec'">质量可靠性</a>
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec'">维修方便性</a>
		    	<a href="#" class="easyui-linkbutton" style="width:100%;margin-top: 5px"
		    	 data-options="toggle:true,group:'bwOutDec'">其他</a>
		    </div>
		    <div title="车身内饰" data-options="" style="padding:10px;">
		        content2    
		    </div>
		    <div title="电气" style="padding:10px;">
		        content3    
		    </div>
		    <div title="动力底盘" style="padding:10px;">
		        content3    
		    </div>
		</div>  
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	<div id="cc" class="easyui-layout" data-options="fit:true">   
		    <div data-options="region:'north',title:'评价标准',collapsible:false" style="height:80px;text-align: center;">
		    	<table>
		    		<tr>
		    			<td style="width:100px">1.0</td>
		    			<td style="width:100px">2.0</td>
		    			<td style="width:100px">3.0</td>
		    			<td style="width:100px">4.0</td>
		    			<td style="width:100px">5.0</td>
		    		</tr>
		    		<tr>
		    			<td>非常不好</td>
		    			<td>不好</td>
		    			<td>普通</td>
		    			<td>好</td>
		    			<td>非常好</td>
		    		</tr>
		    	</table>
		    </div>
		    <div data-options="region:'center',title:'评价内容'" style="padding:5px;">
		    	<table id="bwOutDec"></table>
		    </div>   
		</div>
    </div>   
</div>
<script type="text/javascript">
	$(document).ready(function(){
		var columns = [[
		                {
		                	field:'commentItem',title:'评价项目',width:100
		                },
		                {
		                	field:'mainContent',title:'主要内容',width:100
		                },
		                {
		                	field:'grade',title:'打分',width:100
		                },
		                {
		                	field:'remark',title:'备注',width:100
		                }
		                ]];
		$('#bwOutDec').datagrid({
			fit:true,
			fitColumns:true,
			rownumbers: true,
			singleSelect: true,
			columns: columns,
			url:'reports/bwOutDec.json',
			toolbar: [{
						text:'编辑',
						iconCls: 'icon-edit',
						handler: function(){alert('编辑按钮')}
					},'-',{
						text:'添加',
						iconCls: 'icon-add',
						handler: function(){alert('添加按钮')}
					},'-',{
						text:'导出模板',
						iconCls: 'icon-add',
						handler: function(){alert('添加按钮')}
					}]
		});
	});
</script>